<template>
  <div class="home">
    <div class="header">
      <span class="title"><img :src="images4" class="imgs4"></span>
    </div>
    <div class="header-a"></div>
    <div class="swiper">
      <mt-swipe :auto="4000">
        <mt-swipe-item class="slide1" v-for="item in homelist" :key="item.id">
          <span @click="gofor(item.url)">
            <img :src="item.showImg" class="imgs">
          </span>
        </mt-swipe-item>
      </mt-swipe>
    </div>
    <router-link to="./squery">
      <div class="choose">
        <i class="iconfont">
          <img :src="images1" class="iconss">
        </i>
        <input type="text" placeholder="搜索好物" class="int">
      </div>
    </router-link>
    <router-link to="./hotlist">
      <div class="body-center">
        <div class="banner"></div>
      </div>
    </router-link>

    <div class="commodity">
      <router-link
        tag="div"
        class="commodity-left"
        v-for="item in newsList"
        :key="item.id"
        :to="{name:'Detail',
          query:{
            id:item.id,
          }}"
      >
        <div class="commodity-left-top">
          <img :src="JSON.parse(item.goodsPic)" class="imgs">
        </div>
        <div class="commodity-left-bottom">
          <div class="commodity-left-bottom-title">{{item.goodsName}}{{item.goodsIntro}}</div>
          <div class="commodity-left-bottom-price">￥{{price/100}}起</div>
          <div class="commodity-left-bottom-icon">
            <img :src="images3" class="images3">
          </div>
        </div>
      </router-link>
    </div>

    <div class="bottom">
      <div class="remarks">
        <span class="remarks-left">店铺主页</span>
        <span class="remarks-center">个人中心</span>
        <span class="remarks-center">关注我们</span>
        <span class="remarks-right">店铺信息</span>
      </div>
    </div>
  </div>
</template>
<script>
import pic1 from "../../icons/squery.png";
import pic3 from "../../icons/cart.png";
import pic4 from "../../icons/compangytext.png";
import * as api from "../../request/api.js";
export default {
  name: "Home",
  data() {
    return {
      images1: pic1,
      images3: pic3,
      images4: pic4,
      newsList: [],
      homelist: [],
      i: 0
    };
  },
  created() {
    let i = 0;
    this.$http({
      method: "post",
      url: api.PUBCONTENT,
      data: {
        pageNo: 1,
        pageSize: 10
      }
    })
      .then(resp => {
        this.homelist = resp.data.data;
      })
      .catch(resp => {
        console.log(resp);
      }),
      this.$http({
        method: "post",
        url: api.LIST,
        data: {
          pageNo: 1,
          pageSize: 10,
          keyWord: "",
          goodsTypeId: ""
        }
      })
        .then(resp => {
          console.log(resp);
          this.newsList = resp.data.data.slice(i * 5, (i + 1) * 5);
          resp.data.data.forEach(item => {
            this.price = (item.goodsTruePrice / 100).toFixed(2);
            console.log(this.price);
          });
        })
        .catch(err => {
          console.log(err);
        });
  },
  methods: {
    gofor(e) {
      window.location.href = e;
    }
  }
};
</script>
<style lang="less" scoped>
@import "../../less/Home.less";
</style>
<style lang='less' scoped>
.swiper {
  width: 100%;
  height: 350px;
}

.mint-swipe-item {
  height: 350px;
  color: #fff;
  font-size: 30px;
  text-align: center;
  margin-bottom: 20px;
  line-height: 350px;
  background: #666666;
}
.mint-swipe-indicators {
  position: absolute;
  bottom: 5px;
  left: 88%;
  .mint-swipe-indicator {
    background-color: #fff;
  }
  .is-active {
    background-color: #ba251e !important;
  }
}
</style>
